<template>
    <div class="content">
        <div class="list_hot">
            <div class="Card-header_card">
                <div class="card-title">
                    <span class="title_SE4va">{{ $t('header_nav_hot') }}</span>
                </div>
                <div class="recharge_content">
                    <div class="mian_item" v-for="(item,index) in game_list" :key="index">
                        <div @click="$router.push(`/home/gameCenter/${item.id}`)" :class="index < 3 ? (index % 2 === 0 ? 'img img2' : 'img img1') : 'img'" :style="`background-image:url(${$baseUrl+item.icon})`"></div>
                        <div class="text">
                            <h3 @click="$router.push(`/home/gameCenter/${item.id}`)">{{ item.title }}</h3>
                            <p>{{ item.desc }}</p>
                            <div class="btn" @click="open_game(item.id,item.title,item.pixel_code)">
                                <button>{{ $t('play_game') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive, ref } from "vue";
import { useGetGameUrl } from '@/hooks/getGameUrl'
import { useUserInfoStore } from '@/store/modules/user_info/index';
import { useRouter } from "vue-router"
const router = useRouter()
const user_infoStore = useUserInfoStore();
const userInfo = reactive(user_infoStore.userInfo)
const open_game = async (game_id, game_name, pixel_code) => {
    const url = router.resolve({ path: '/playgame', query: { id: game_id, game_name: game_name, pixel_code } }).href;
    window.open(url)
}

const game_list = reactive([])
const getList = async () => {
    const list = await axios.get('/gameHotList?limit=99')
    Object.assign(game_list, list.data.data)
    console.log(game_list);
}
getList()
</script>

<style lang="less" scoped>
.content {
    width: 95%;
    margin-top: 16px;

    .list_hot {
        margin-bottom: 20px;

        .card-title {
            position: relative;

            .nav {
                display: inline-flex;
                font-size: 15px;

                p {
                    margin-left: 15px;
                    cursor: pointer;
                }

                p:hover {
                    color: rgb(11, 145, 241);
                }

                .active {
                    color: rgb(11, 145, 241);
                }
            }
        }

        .title_SE4va {
            font-size: 23px;
            font-weight: bold;
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* 渐变背景 */
            -webkit-background-clip: text; /* 文字渐变 */
            background-clip: text;
            color: transparent; /* 隐藏原文字颜色 */
            letter-spacing: 1px;
            line-height: 32px;
            position: relative;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* 文字阴影 */
            filter: brightness(1.1);
        }

        .title_SE4va::before {
            content: '🔥'; /* 图标装饰 */
            margin-right: 10px;
            background: transparent !important;
            color: @primary-color;
        }


        .recharge_content {
            margin-top: 15px;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 每行显示三个卡片 */
            gap: 15px; /* 卡片之间的间距 */

            .mian_item {
                display: flex;
                align-items: center;
                background: #ffffff;
                padding: 12px;
                border-radius: 10px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                min-width: 250px;
                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
                }

                .img {
                    width: 80px; /* 缩小图片宽度 */
                    height: 80px; /* 缩小图片高度 */
                    background-size: 100%;
                    background-position: center;
                    background-repeat: no-repeat;
                    border-radius: 10px;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                }

                .img2 {
                    border: 2px solid #2277e6;
                    filter: brightness(1.4);

                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        background-image: url(/src/assets/icon-bg1.gif);
                        position: absolute;
                        background-position: center;
                        background-size: 190%;
                        left: 0;
                        filter: opacity(0.4);
                    }
                }

                .img1 {
                    border: 2px solid #ea9105;
                    filter: brightness(1.4);

                    &::before {
                        content: "";
                        width: 100%;
                        height: 100%;
                        background-image: url(/src/assets/icon-bg.gif);
                        position: absolute;
                        background-position: center;
                        background-size: 190%;
                        left: 0;
                        filter: opacity(0.4);
                    }
                }

                .text {
                    margin-left: 12px;
                    flex: 1;

                    h3 {
                        margin: 0;
                        font-size: 16px; /* 缩小标题字体 */
                        font-weight: bold;
                        color: #333;
                        cursor: pointer;
                        transition: color 0.3s ease;

                        &:hover {
                            color: #2b9ae7;
                        }
                    }

                    p {
                        font-size: 12px; /* 缩小描述字体 */
                        margin: 6px 0;
                        color: #666;
                        line-height: 1.4;
                        text-overflow: ellipsis;
                        white-space: normal;
                        overflow: hidden;
                        -webkit-line-clamp: 3;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    }

                    .btn {
                        text-align: right;

                        button {
                            color: #44a6f5;
                            background-color: transparent;
                            border: 1px solid #44a6f5;
                            padding: 6px 12px; /* 缩小按钮内边距 */
                            border-radius: 6px;
                            cursor: pointer;
                            font-size: 12.5px; /* 缩小按钮字体 */
                            font-weight: 500;
                            transition: all 0.3s ease;

                            &:hover {
                                background-color: #44a6f5;
                                color: white;
                                box-shadow: 0 4px 12px rgba(68, 166, 245, 0.3);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>